<template>
	<view class="container">
		<!-- 图片区域 -->
		<view class="top-showd">
		</view>
		<view class="group_box">
			<view class="group_name">团队业绩</view>
			<view class="total">{{teamMoney}}</view>
			<view class="vip-box">
				<view>
					<view class="">
						直推会员
					</view>
					<view v-if="directPushNum!=null">{{'VIP '+directPushNum+'人'}}</view>
					<view v-if="directPushYkNum!=null">{{'游客 '+directPushYkNum+'人'}}</view>
				</view>
				<view>
					<view class="">
						团队会员
					</view>
					<view v-if="teamVIPNumber!=null">{{'VIP '+teamVIPNumber +'人'}}</view>
					<view v-if="teamNumber!=null">{{'游客 '+teamNumber +'人'}}</view>
				</view>
			</view>
			<view class="vip-num">
			</view>
		</view>
		<!-- 列表区域 -->
		<view class="list-box">
			<!-- 分类 -->
			<view class="list-title">
				<view class="list-item-width">账号</view>
				<view class="list-item-width">昵称</view>
				<view class="list-item-width">个人级别</view>
			</view>
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="list-item-width">{{item.phone}}</view>
				<view class="list-item-width">{{item.nickName}}</view>
				<view class="list-item-width level">{{item.vipName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {team} from "../../api/team.js"
	export default{
		onNavigationBarButtonTap(e){
			uni.navigateTo({
				url:"/pages/user/guize"
			})
		},
		data() {
			return {
				num:0,
				teamMoney:null,//团队业绩
				teamNumber:null,//团队游客
				teamVIPNumber:null,//团队vip
				directPushNum:null,//直推会员
				directPushYkNum:null,//直推会员
				list:[],
				flag:true
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			console.log(1111111)
			if(this.flag){
				this.getData()
			}
		},
		methods:{
			getData(){
				this.num ++
				this.get(team,{pageNum:this.num,pageSize:20}).then(res => {
					if(res.code == 1){
						this.teamMoney = res.data.teamMoney
						this.teamNumber = res.data.teamNumber
						this.directPushNum = res.data.hyNum
						this.teamVIPNumber=res.data.teamHuiYuanNumber
						this.directPushYkNum=res.data.ptNum
						if(res.data.teamList.list.length<20){
							this.flag=false
						}
						res.data.teamList.list.forEach(item=>{
							this.list.push(item)
						})
					}
				})
			}
		}
	}
</script>

<style>
	.top-showd{
		width: 750rpx;
		height: 300rpx;
		background-image: url(../../static/user/group_bg.png);
		background-repeat: no-repeat;
		background-size: 750rpx 300rpx;
		filter: brightness(0.5);
	}
	.group_box{
		position: absolute;
		top: 0;
		width: 750rpx;
		height: 300rpx;
		/* background: rgba(255,255,255,0.5); */
		padding-top: 50rpx;
		z-index: 3;
		text-align: center;
	}
	.group_name{
		width: 128rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 0 auto ;
	}
	.total{
		width: 147rpx;
		font-size: 32rpx;
		font-weight: 800;
		color: #FFFFFF;
		margin: 0 auto;
	}
	.vip-box{
		width: 590rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
	.vip-num{
		width: 550rpx;
		margin: 14rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: 800;
		color: #FFFFFF;
	}
	.list-box{
		width: 690rpx;
		/* height: 300rpx; */
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0rpx auto;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}
	.list-title{
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
	}
	.list-item-width{
		width: 33%;
		text-align: center;
	}
	.list-item{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 25rpx;
	}
	.level{	
	color: #F0812D;
	}
</style>
